<template>
  <div class="broadband">
    <topBar :title="title"></topBar>
    <div class="main-wrap">
      <div class="left">
        <div class="text">
          <div class="margin" v-for="(item,index) in textList" :key="index">
            <div class="square"></div>
            <div class="html">{{ item. text}}</div>
          </div>
        </div>
        <p>口径：按照宽带专线收入科目分析，专线收入为科目收入，用户数为发生专线收入的用户</p>
      </div>
      <div class="right">
        <div class="bot">
            <div class="line" v-for="(item, index) in lineDatas" :key="index">
                <lineEchartsSingle :id="'linechart' + index" :lineData="item"></lineEchartsSingle>
            </div>
        </div>
      </div>
    </div>
    <div class="line-bot">
        <mixCharts :principal="principal"></mixCharts>
    </div>
  </div>
</template>

<script>
import topBar from "./topBar";
import lineEchartsSingle from "../showEchart/lineEchartsSingle";
import mixCharts from '../showEchart/mixCharts';
import {
  bline,
} from "@/api/codeIncome/analysis";
export default {
  name: "broadband",
  components: {
    topBar,
    lineEchartsSingle,
    mixCharts
  },
  props: {
    searchData: {
      type: Object,
      default: {},
    },
  },
  watch: {
    searchData: {
      handler(newName) {
          this.getData();
      },
      deep: true,
    },
  },
  data() {
    return {
      title: "码号收入-宽带专线科目收入分析",
      textList: [],
      lineDatas: [],
      principal: {}
    };
  },
  created() {},
  mounted() {
    this.getData();
  },
  methods: {
    // 获取码号收入宽带专线科目收入分析
    getData() {
      this.lineDatas = []
      this.principal = {}
      bline({
        acctMonth: this.searchData.acctMonth,
        // areaId: this.searchData.areaId,
      }).then((res) => {
        if (res.code == 200) {
          this.textList = res.data.characterList
          let chartsArr = res.data.dataList
          let xTime = []
          let amtList = []
          let cntList = []
          let arpuList = []
          let stockList = []
          let incremList = []
          chartsArr.forEach(item => {
              if (item.code == 'all') {
                  item.data.forEach(its => {
                      xTime.push(its.acctMonth)
                      amtList.push(its.amt)
                      cntList.push(its.cnt)
                      arpuList.push(its.arpu)
                  })
              } else if(item.code  == 'stock') {
                  item.data.forEach(it => {
                      stockList.push(it.arpu)
                  })
              } else if (item.code == 'increm') {
                  item.data.forEach(i => {
                      incremList.push(i.arpu)
                  })
              }
          })
          let obj = {}
          obj['title'] = '宽带专线收入（万元）'
          obj['xTime'] = xTime
          obj['data'] = amtList
          obj['color'] = '#C1504C'
          this.lineDatas.push(obj)
          let object ={}
          object['title'] = '宽带专线用户数（万户）'
          object['xTime'] = xTime
          object['data'] = cntList
          object['color'] = '#4E81BD'
          this.lineDatas.push(object)
          let principal = {}
          principal['xTime'] = xTime
          principal['amt'] = stockList
          principal['cmt'] = incremList
          principal['arup'] = arpuList
          this.principal = principal
        }
      });
    },
  },
};
</script>

<style scoped>
.broadband {
    box-sizing: border-box;
    padding: 20px;
    box-shadow: 0px 0px 10px 1px rgb(0 0 0 / 15%);
}
</style>

<style scoped lang="scss">
.broadband {
  margin-top: 20px;
  height: 900px;
  .main-wrap {
    width: 100%;
    height: 520px;
    display: flex;
    justify-content: space-between;
    box-sizing: border-box;
    padding: 20px;
    .left {
      width: 30%;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: flex-start;
      .text {
        width: 100%;
        > div {
          display: flex;
          justify-content: flex-start;
        }
        .margin {
            margin-bottom: 20px;
        }
        .square {
          margin-top: 15px;
          margin-right: 10px;
          width: 10px;
          height: 10px;
          background: #c00000;
          transform: rotate(45deg);
        }
        .html {
          flex: 1;
          font-size: 20px;
          color: black;
          letter-spacing: 1px;
          line-height: 38px;
        }
      }
      p {
        font-size: 12px;
        color: rgba(133, 131, 131, 0.678);
        margin-top: 10px;
      }
    }
    .right {
      flex: 1;
      .bot {
        width: 100%;
        height: auto;
        .line {
            width: 100%;
            height: 240px;
        }
      }
    }
  }
  .line-bot {
        width: 100%;
        height: 270px;
    }
}
</style>
